/**
 *通用形列表-标签部分
 */
<template>
    <el-tabs 
        v-model="tabActiveName" 
        class="my-tabs" 
        @tab-change="tabChange"
    >
        <el-tab-pane 
            v-for="(item, index) in tabArr"
            :key="index"
            :name="item.tabName"
            :disabled="item.tabDisabled"
        >
            <template #label>
                <el-badge 
                    :value="item.badgeValue"
                    :max="item.badgeMax"
                    :is-dot="item.badgeIsDot"
                    :hidden="item.badgeHidden"
                    :type="item.badgeType"
                    :show-zero="item.badgeShowZero"
                    :color="item.badgeColor"
                    :offset="item.badgeOffset"
                >
                    <span>{{ item.tabLabel }}</span>
                </el-badge>
            </template>
        </el-tab-pane>
        
    </el-tabs>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed, watch  } from 'vue'
    import type { Ref, Raw } from 'vue'
    import {  } from '@/apis'
    import { isPhone } from '@/utils'

    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'
    import { ElMessage } from 'element-plus'
    import {
        Lock,
        User,
        Monitor,
        Phone,
        Search,
        RefreshRight,
        CaretTop,
        CaretBottom,
    } from '@element-plus/icons-vue'
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    
    const tabArr = defineModel<any>('tabArr', {
        required: false,
        default: [
            
        ]
    })
    const tabActiveName = defineModel<string>('tabActiveName', {
        required: false,
        default: ''
    })
    const emits = defineEmits<{
        // (e: 'update:isCollapse', data: boolean): void,
        'tabChange': [data: any]
    }>()

    
    watch(() => tabArr, (nVal, oVal) => {
        // console.log(nVal, oVal)
        tabActiveName.value = nVal.value?.[0]?.tabName
    }, {
        immediate: true
    })


    const tabChange = (tab) => {
        // console.log(tab)
        emits('tabChange', tab)
    }
    
</script>

<style lang="scss" scoped>
    .my-tabs {
        margin-top: 20px;
    }
</style>